<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
    <link rel="stylesheet" href="./api.css">
</head>

<body>
<div id="content"></div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  const data = `
  # API 说明
  | 属性名 | 类型 | 默认值 | 说明 |
  | --- | --- | --- | --- |
  | title | string | 无 | 弹窗标题 |
  | open | boolean | false | 弹窗是否打开 |
  | width | number | 600 | 弹窗宽度 |
  | footer | ReactNode | 取消和确认按钮 | 弹窗底部内容，为null时隐藏底部 |
  | confirmText | string | 确认 | 确认按钮文字 |
  | closeText | string | 取消 | 取消按钮文字 |
  | classNames | string | 无 | 弹窗整体类名 |
  | contentClassNames | string | 无 | 弹窗内容类名 |
  | wrapClassNames | string | 无 | 弹窗外层类名（包括mask和弹窗整体）|
  | styles | React.CSSProperties | 无 | 弹窗整体样式 |
  | closeable | boolean | true | 弹窗是否可通过右上角按钮关闭 |
  | closeIcon | ReactNode | 无 | 右上角关闭按钮图标 |
  | mask | boolean | true | 弹窗是否有蒙层 |
  | maskClosable | boolean | true | 蒙层是否可通过点击关闭弹窗 |
  | zIndex | number | 99 | 弹窗层级 |
  | loading | boolean | false | 弹窗内容是否显示loading状态 |
  | confirmLoading | boolean | false | 确认按钮是否显示loading状态 |
  | onClose | () => void | 无 | 取消按钮点击事件 |
  | onConfirm | () => void | 无 | 确认按钮点击事件 |
  | afterClose | () => void | 无 | 弹窗关闭后回调 |
  `

  document.getElementById('content').innerHTML = marked.parse(data);
</script>
</body>
</html>
